<script setup>
// 组件引入
import HeaderCpn from '@/components/main/header/headerCpn.vue'
import TableCpn from '@/components/main/student/system-manger/table-cpn.vue'
import AddPanel from '@/components/main/student/system-manger/add-panel.vue'
import RetreatPanel from '@/components/main/student/system-manger/retreat-panel.vue'
// 功能函数
import eventBus from '@/utils/eventBus'
import { useStudentStore } from '@/store/super-manger/studentStore';
import { storeToRefs } from 'pinia';
import { onMounted, reactive } from 'vue';
const studentStore = useStudentStore();
const { isShowStudentPanel, panelTitle, openPanelType } = storeToRefs(studentStore);

// 监听新增按钮的点击
eventBus.on('addBtnClick', function() {
  isShowStudentPanel.value = true;
  panelTitle.value = '新增';
  openPanelType.value = 'add';  // 打开面板的类型
})

// 页面加载完毕后，获取所有学生信息
onMounted(() => {
  // 获取所有的学生信息
  studentStore.getStudentData();
  // 获取宿舍楼信息
  studentStore.getBuildingsData('M');
})

const options = reactive([
  {
    title: '学号',
    value: 'sno',
    text: '请输入学号'
  }, 
  {
    title: '姓名',
    value: 'name',
    text: '请输入姓名'
  }
])

// 搜索按钮点击
eventBus.on('searchBtnClick', function(dataInfo) {
  const { key, value } = dataInfo;
  // 发送网络请求搜索
  studentStore.searchStudentInfo(key, value);
})

// 搜索框没有值，从新请求所有数据
eventBus.on('clearSearchBox', function() {
  studentStore.getAllStudent();
})
</script>

<template>
  <div class="student main_content">
    <!-- 头部组件 -->
    <header-cpn :elOptions="options" />
    <!-- 表格组件 -->
    <table-cpn />
    <!-- 添加面板 -->
    <add-panel /> 
    <!-- 退宿面板 -->
    <retreat-panel />
  </div>
</template>

<style scoped>

</style>